<template>
  <div class="login-main">
    <div class="container">
      <div class="title">地理实体数据更新维护及自然资源实体数据生产后台</div>
      <div class="login-box">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
            >
              <i slot="prefix" class="el-icon-user input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
              <i slot="prefix" class="el-icon-lock input-icon" />
            </el-input>
          </el-form-item>
          <el-checkbox
            v-model="loginForm.rememberMe"
            style="margin: 0px 0px 25px 0px"
            >记住密码</el-checkbox
          >
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/login.js";
import md5 from "js-md5";
import { setToken, setUserName } from "@/utils/auth";
let vm = null;
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: "",
      },
      loading: false,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
      },
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let params = {
            username: this.loginForm.username,
            password: md5(this.loginForm.password),
          };
          login(params)
            .then((res) => {
              this.loading = false;
              if (res.code === 200) {
                let { token, userId, userName } = res.data;
                let testtoken = "111";
                // setToken(testtoken);
                setToken(token);
                setUserName(userName);
                vm.$message({ message: "登录成功", type: "success" });
                this.$router
                  .push({ path: this.redirect || "/" })
                  .catch(() => {});
              }
            })
            .catch((err) => {
              this.loading = false;
              vm.$message({ message: "登录失败", type: "warning" });
            });
        }
      });
    },
  },
  created() {
    vm = this;
  },
};
</script>

<style lang="less" scoped>
.login-main {
  width: 100%;
  min-height: 100%;
  background: #f0f2f5 url(~@/assets/images/login/background.svg) no-repeat 50%;
  background-size: 100%;
  position: relative;

  .container {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      margin-bottom: 0.1rem;
      font-weight: 400;
      font-size: 0.3rem;
    }

    .login-box {
      .login-form {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        padding: 25px 25px 5px 25px;
        .el-input {
          height: 38px;
          input {
            height: 38px;
          }
        }
        .input-icon {
          height: 39px;
          width: 14px;
          color: #606266;
          margin-left: 2px;
        }
      }
      .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
      }
    }
  }
}
</style>
